<template>
  <div class="dashboard-container">
    <!-- 时间选择器 -->
    <div class="time-selector">
      <el-radio-group v-model="current" size="small">
        <el-radio-button v-for="item in timeOption" :key="item.label" :label="item.label" class="time-option">
          {{ item.label }}
        </el-radio-button>
      </el-radio-group>
    </div>

    <!-- 数据统计卡片 -->
    <div class="stats-grid">
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon" style="background-color: #409EFF;">
            <i class="el-icon-s-order"></i>
          </div>
          <div class="stat-info">
            <div class="stat-title">订单总数</div>
            <div class="stat-value">{{ matchOrderByTime().length }}</div>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon" style="background-color: #67C23A;">
            <i class="el-icon-circle-check"></i>
          </div>
          <div class="stat-info">
            <div class="stat-title">已完成订单</div>
            <div class="stat-value">{{ matchWanchengOrderByTime().length }}</div>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon" style="background-color: #E6A23C;">
            <i class="el-icon-user"></i>
          </div>
          <div class="stat-info">
            <div class="stat-title">打手总数</div>
            <div class="stat-value">{{ matchUser(2).length }}</div>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon" style="background-color: #F56C6C;">
            <i class="el-icon-s-custom"></i>
          </div>
          <div class="stat-info">
            <div class="stat-title">管理员总数</div>
            <div class="stat-value">{{ matchUser(3).length }}</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 排行榜表格 -->
    <el-card class="ranking-card" shadow="hover">
      <div slot="header" class="ranking-header">
        <span class="ranking-title">
          <i class="el-icon-trophy" style="color: #E6A23C; margin-right: 8px;"></i>
          打手排行榜
        </span>
        <!-- <el-button type="text" @click="refreshRanking">刷新数据</el-button> -->
      </div>

      <el-table :data="setRankData()" style="width: 100%" :row-class-name="tableRowClassName" stripe
        highlight-current-row>
        <el-table-column type="index" width="60" label="排名" align="center">
          <template slot-scope="scope">
            <span v-if="scope.$index < 3" class="top-rank">
              {{ scope.$index + 1 }}
            </span>
            <span v-else>
              {{ scope.$index + 1 }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="nickName" label="打手名称" width="180">
          <template slot-scope="scope">
            <div class="player-info">
              <!-- <el-avatar :size="32" :src="scope.row.avr || ''"></el-avatar> -->
              <span style="margin-left: 10px;">{{ scope.row.nickName }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="completed" label="已接订单" sortable align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.completed }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="income" label="总收入" sortable align="right">
          <template slot-scope="scope">
            <span class="income-text">¥{{ scope.row.income.toLocaleString() }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import orderApi from '@/plugins/api/order'
import userApi from '@/plugins/api/user'
import dealApi from '@/plugins/api/deal'
import { fuzzyMatch } from '@/plugins/utils/filterArray'
import { getToday, getThisWeek, getThisMonth, getThisYear } from '@/plugins/utils/timeUtils'

export default {
  name: 'Dashboard',
  data() {
    return {
      orders: [],
      users: [],
      deals: [],
      timeOption: [
        {
          id: 1,
          label: '今日',
          time: getToday()
        },
        {
          id: 2,
          label: '本周',
          time: getThisWeek()
        },

        {
          id: 3,
          label: '本月',
          time: getThisMonth()
        },
        {
          id: 4,
          label: '本年',
          time: getThisYear()
        },
      ],
      current: '今日',
      rankingData: [
      ]
    }
  },
  mounted() {
    this.getOrder()
    this.getUser()
    this.getDeals()
  },
  methods: {
    async getOrder() {
      const res = await orderApi.list()
      if (res.code === 200) {
        this.orders = res.data
      }
    },
    async getUser(type) {
      const res = await userApi.all()
      if (res.code === 200) {
        this.users = res.data
      }
    },

    async getDeals() {
      const res = await dealApi.list()
      if (res.code === 200) {
        this.deals = res.data
      }
    },

    matchOrderByTime() {
      const select = this.timeOption.find(item => item.label === this.current)
      const orderByTime = this.orders.filter(item => new Date(item.createdAt).getTime() >= select.time.start && new Date(item.createdAt).getTime() <= select.time.end)
      return orderByTime
    },
    matchdealsByTime() {
      const select = this.timeOption.find(item => item.label === this.current)
      const dealsByTime = this.deals.filter(item => new Date(item.jiesuanTime).getTime() >= select.time.start && new Date(item.jiesuanTime).getTime() <= select.time.end)
      return dealsByTime
    },


    matchWanchengOrderByTime() {
      const select = this.timeOption.find(item => item.label === this.current)
      const orderByTime = this.orders.filter(item => item.wanchengTime && new Date(item.wanchengTime).getTime() >= select.time.start && new Date(item.wanchengTime).getTime() <= select.time.end)
      return orderByTime
    },

    matchUser(role) {
      return fuzzyMatch(this.users, { role })
    },

    setRankData() {
      const players = this.matchUser(2)
      const orders = this.matchOrderByTime()
      const deals = this.matchdealsByTime()
      for (let index = 0; index < players.length; index++) {
        const user = players[index]
        const orderByUser = orders.filter(order => {
          const ids = order.playerId.split(',').map(id => id.trim());
          return ids.includes(user.id.toString());
        })
        user.completed = orderByUser.length || 0
        user.income = 0
        const dealsByUser = deals.filter(item => item.userId === user.id && item.type === 2)
        if (dealsByUser.length) {
          for (let j = 0; j < dealsByUser.length; j++) {
            user.income = Number(user.income) + Number(dealsByUser[j].value)
          }
        }
      }
      return players.sort((a, b) => Number(b.income) - Number(a.income))
    },

    refreshRanking() {
      this.$message({
        message: '排行榜数据已刷新',
        type: 'success'
      })
      // 这里可以添加实际刷新数据的逻辑
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 0) {
        return 'first-row'
      } else if (rowIndex === 1) {
        return 'second-row'
      } else if (rowIndex === 2) {
        return 'third-row'
      }
      return ''
    }

  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  // margin: 20px;
  padding: 30px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.time-selector {
  margin-bottom: 20px;
  text-align: center;

  .time-option {
    margin: 0 5px;
    border-radius: 4px !important;
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  border-radius: 8px;
  transition: transform 0.3s;

  &:hover {
    transform: translateY(-5px);
  }
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 15px;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;

  i {
    font-size: 24px;
    color: white;
  }
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.ranking-card {
  margin-top: 20px;
  border-radius: 8px;
}

.ranking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ranking-title {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.player-info {
  display: flex;
  align-items: center;
}

.top-rank {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  color: white;
  font-weight: bold;

  &:nth-child(1) {
    background-color: #FFD700;
    /* 金牌 */
  }

  &:nth-child(2) {
    background-color: #C0C0C0;
    /* 银牌 */
  }

  &:nth-child(3) {
    background-color: #CD7F32;
    /* 铜牌 */
  }
}

.income-text {
  font-weight: bold;
  color: #E6A23C;
}

/* 特殊行样式 */
::v-deep .first-row {
  background-color: rgba(255, 215, 0, 0.1) !important;
}

::v-deep .second-row {
  background-color: rgba(192, 192, 192, 0.1) !important;
}

::v-deep .third-row {
  background-color: rgba(205, 127, 50, 0.1) !important;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>

